<script>
    // @ts-nocheck

    import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
  import { ChevronDownOutline } from 'flowbite-svelte-icons';
    import { page } from '$app/stores';
    $: activeUrl = $page.url.pathname;

    let menu2 = [
    { name: '热门枪械', help: "Connect with third-party tools that you're already using." },
    { name: '枪械使用排行', help: "Connect with third-party tools that you're already using." },
    { name: '赛季枪械推荐', help: "Connect with third-party tools that you're already using." },
    { name: 'pvp枪械推荐', help: "Connect with third-party tools that you're already using." },
    { name: '配装大全', help: "Connect with third-party tools that you're already using." },
    { name: '战绩查询', help: "Connect with third-party tools that you're already using." }
  ];


    const routers = [{
        label:'首页',
        value:'/'
    },{
        label:'枪械图鉴',
        value:'/weapons/1'
    }
    // ,{
    //     label:'一键配装',
    //     value:'/allocation'
    // },{
    //     label:'战绩查询',
    //     value:'/record'
    // }
    ]
</script>

<!-- <header>
    <div class="container">
        <div class="logo"><img src="/images/logo.png" /></div>
        <div class="box">
            <nav>
                {#each routers as item,index}
                <a href={item.value} class:on={item.value == activeUrl}>{item.label}</a>
                {/each}
                
            </nav>
        </div>
        
    </div>
</header> -->

<div class="headerbg sticky top-0 z-50">


<Navbar let:hidden let:toggle class="bg-transparent" style="background:none">
    <NavBrand href="/">
      <img src="/images/logo.png" class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
    </NavBrand>
    <NavHamburger on:click={toggle} />
    <NavUl {hidden} {activeUrl}>
        {#each routers as item,index}
            <!-- <a href={item.value} class:on={item.value == activeUrl}>{item.label}</a> -->
            <NavLi href={item.value} >{item.label}</NavLi>
        {/each}
      <NavLi class="cursor-pointer">
        多功能<ChevronDownOutline class="w-6 h-6 ms-2 text-primary-800 dark:text-white inline" />
      </NavLi>
      <MegaMenu full items={menu2} let:item>
        <a href="/" class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 h-full">
          <div class="font-semibold dark:text-white">{item.name}</div>
          <span class="text-sm font-light text-gray-500 dark:text-gray-400">{item.help}</span>
        </a>
      </MegaMenu>
      <!-- <NavLi href="/services">关于</NavLi> -->
    </NavUl>
  </Navbar>

</div>
<style lang="less" scoped>
    .headerbg{
        background: var(--color1);
    }


    // @media (min-width: 768px) {
    //     .container {
    //     max-width: 720px;
    //     }
    // }



</style>
